import React from 'react';
import {withRouter} from 'react-router-dom'

import './index.less'
class Header extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            headerList: [{
                url: '/ComponentComunication',
                title: '组件通信'
            },{
                url: '/home',
                title: 'home'
            }]
        }
    }

    render() {
        const {headerList} = this.state;
        return (
            <div className="header-wrap">
                <ul className="header-ul">
                    {
                        headerList.map((item, index) => (
                        <li key={index} onClick={this.handleClick.bind(this, item)}>{item.title}</li>
                        ))
                    }
                </ul>
            </div>
        )
    }

    handleClick = (item) => {
        this.props.history.push(item.url)
    }
}

const Index  = withRouter(Header)
export default Index